<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="mootools.js"></script>

 <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAANhACURXEHzPB1ceRC78vGhT91ermDotWNI1_CorQ1RPrsuLh0hTf77i_j8JtEi8cfv85zpAgH4nveQ"
    type="text/javascript"></script>
  <script type="text/javascript">

  //<![CDATA[

  function load() {
    if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.setCenter(new GLatLng(21.35, -157.9), 13);
    }
  }

  //]]>
  </script>

<script type="text/javascript">
window.addEvent('domready', function() {
 
 $('loading').setStyle('display', 'none'); //hides the loading image
 var shelf = new Fx.Slide('shelf').hide(); //creates new Fx.Slide object from shelf div, also the hide() function hides the div when the page loads
 $('header').addEvent('click', function(e) { //Adds an onClick event to header div
    e = new Event(e); 	
	
	if ($('header').hasClass('arrow-down')) { //checks if the sliding direction is down - we dont want to send ajax request when hiding the shelf
	$('shelf').empty() //empties the shelf
	$('loading').setStyle('display', 'block'); //Displays the loading image
	new Ajax ('ajax-response.html', //url of file
	 {method: 'get', //method
	  update: $('shelf'), // element that will be updated with response
	  onComplete: function() { 
	  $('loading').setStyle('display', 'none'); //Hides the loading image 
	    shelf.toggle(); //toggles the shelf
		 } 		 
	  }).request(); //sends the request
    }
	else { 
	shelf.toggle(); //in case we dont want to send ajax request, we just slide it out
	}
	
    if ($('header').hasClass('arrow-down')){
	 $('header').removeClass('arrow-down').addClass('arrow-up');
	}
	else {
	 $('header').removeClass('arrow-up').addClass('arrow-down');
	}
	
	e.stop(); //this makes sure that the user wont be sent to given url (or that the page refreshes when using dummy url like "#") if the clicked element was a link 
 });

var mySlide2 = new Fx.Slide('navbox', {mode: 'horizontal'});
 
$('toggle').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.toggle();
	e.stop();
});
 
	
});


window.addEvent('domready', function() {
 
var mySlide2 = new Fx.Slide('navbox', {mode: 'horizontal'});
 
$('toggle').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.toggle();
	e.stop();
});
 
	
});

</script>
<title>Let's get Hitogether!</title>
<style type="text/css">
* {padding:0; margin:0;}
body {font-family:Arial, Helvetica, sans-serif; font-size:12px; background:#000000; padding:1em; }
a {color:#b0fa0f;}
#title {left: 0px; top: 0px;font-family:Times; font-size:50px; color:#b0fa0f; background:#242424; position:absolute; z-index:2; padding:5px; border-style:solid double}
#wrap {width:200px; margin:0 auto; background:#242424; z-index:2; position:absolute; right: 0px; top: 0px}
#header {padding:5px 10px 5px 30px; color:#b0fa0f;  cursor:pointer;}
#header p {float:left;}
/*Arrows - class for each position*/
.arrow-down {background:url(arrow-down.gif) no-repeat #2d2d2d 10px 10px;}
.arrow-up {background:url(arrow-up.gif) no-repeat #2d2d2d 10px 10px;}
#shelf {padding:1em; color:#CCCCCC; }
#loading {float:right;}
#navbox2	{position:absolute; z-index:3;  top:110px; left:0px; height: 400px; width:150px; background:#242424; color:white; border:solid; border-color:black; padding: 4px; overflow: auto}
#map {z-index:1; position:absolute; top:0px; left:0px;right:0px; bottom:200px; border-style:thick; border-bottom-style: groove;  }
#toggle2	{position:absolute; z-index:2; top:100px; left:0px}
li.category {padding-left:0px}
li.subcategory {padding-left:8px; background:#2d2d2d;}
</style>
</head>

<body onload="load()" onunload="GUnload()">
<div id="wrap">
 <div id="shelf"></div>
 <div id="header" class="arrow-down">
  <p>My Account</p><img src="ajax-loader.gif" id="loading" /><br style="clear:both;" />
 </div>
</div>
<h1 id="title">Hitogether</h1>

<div id="navbox2">
<ul>
<li class="category">Carpentry</li>
<li class="subcategory">Finished</li>
<li class="subcategory">Framing</li>
<li class="subcategory">Drywall</li>
<li class="category">Jobs</li>
<li class="subcategory">Part-time</li>
<li class="subcategory">Full-time</li>
<li class="subcategory">Soul-sucking</li>
<li class="category">Events</li>
<li class="category">Parties</li>
</ul>

</div>

<div id="map" ></div>



<a id="toggle" href="#">toggle</a> 
 

<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
